<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="../jqgrid.jsp"></jsp:include>

</head>
<script type="text/javascript">
function queryAllRooms() {
	var url = "queryAllRooms.action";
	var types = "";
	$.ajax({
		type : "POST",
		url : url,
		dataType : "json",
		async : false,
		success : function(data) {
			$.each(data, function(i, item) {
				types += item["id"] + ":"+item["bNumber"]+"#"+item["roomCode"] + ";";
			});
		}
	});
	return types.substring(0, types.lastIndexOf(";"));
}
	$(document).ready(function() {
		jQuery("#monthRatelist").jqGrid({
			url : 'queryMonthRate.action',
			autowidth : true,
			datatype : "json",
			colNames : [ 'id','房间号','房间号','房间面积(平方米)','结算时间','使用水量(吨)','水费单价(元)','水费总计(元)','使用电量(度)','电费单价(元)','电费总计(元)','采暖单价(元/平方米)','采暧费用(元)','费用总和(元)','缴费状态'],
			colModel : [ {
				name : 'id',
				index : 'id',
				width : 55,
				editable : false,
				hidden:true
			}, {
				name : 'roomId',
				index : 'roomId',
				width : 20,
				hidden:true,
				editable : true,
				align : "center",
				edittype:"select",
				editoptions:{
					value:queryAllRooms
				},
				editrules:{
					required:true,
					edithidden:true
				},
			},{
				name : 'roomCode',
				index : 'roomCode',
				align : "center",
				width : 20,
				editable : false,
				editrules:{
					required:false,
				},
				searchoptions :{
					sopt:['cn','nc']
				}
			},{
				name : 'roomArea',
				index : 'roomArea',
				align : "center",
				width : 20,
				editable : false,
				search:false
			},{
				name : 'overTime',
				index : 'overTime',
				width : 20,
				editable : true,
				formatter : "date",
				align : "center",
				editrules:{
					required:true,
					date:true
				},
				formatoptions : {
					"newformat" : "Y-m-d"
				},
				editoptions : {
					size : 10,
					maxlengh : 10,
					dataInit : function(element) {
						$(element).datepicker({
							dateFormat : 'yy-mm-dd'
						});
					}
				},
				searchoptions:{dataInit:datePick,sopt:['le','ge']}

			},{
				name : 'useWaterAmount',
				index : 'useWaterAmount',
				align : "center",
				width : 20,
				editable : false,
				editrules:{
					required:false
				},
				search:false
			},{
				name : 'waterPrice',
				index : 'waterPrice',
				align : "center",
				width : 20,
				editable : true,
				editrules:{
					required:true,
					number:true
				},
				search:false
			},{
				name : 'waterSum',
				index : 'waterSum',
				align : "center",
				width : 20,
				editable : false,
				editrules:{
					required:false
				},
				search:false
			},{
				name : 'useElectricAmount',
				index : 'useElectricAmount',
				width : 20,
				align : "center",
				editable : false,
				editrules:{
					required:false
				},
			search:false
			},{
				name : 'electricPrice',
				index : 'electricPrice',
				width : 20,
				align : "center",
				editable : true,
				editrules:{
					required:true,
					number:true
				},
				search:false

			},{
				name : 'electricSum',
				index : 'electricSum',
				width : 20,
				align : "center",
				editable : false,
				editrules:{
					required:false
				},
				search:false

			},{
				name : 'warmRentPrice',
				index : 'warmRentPrice',
				width : 20,
				align : "center",
				editable : true,
				editrules:{
					required:true,
					number:true
				},
				search:false

			},{
				name : 'warmRentSum',
				index : 'warmRentSum',
				width : 20,
				align : "center",
				editable : false,
				editrules:{
					required:false
				},
				search:false

			},{
				name : 'rentSum',
				index : 'rentSum',
				width : 20,
				align : "center",
				editable : false,
				editrules:{
					required:false
				},
				search:false

			},{
				name : 'rentState',
				index : 'rentState',
				width : 20,
				align : "center",
				editable : true,
				edittype : "select",
				editoptions : {
					value : '1:是;0:否'
				},
				formatter : function(cellvalue, options, row) {
					if (cellvalue == 1) {
						return "是";
					} else {
						return "否";
					}
				},
				stype:'select',
				searchoptions :{
					sopt:['eq','ne'],
					dataUrl:"<%=request.getContextPath()%>/jsp/trueOrFalse.jsp"
				}

			}],
			rowNum : 10,
			rowList : [ 10, 20, 30 ],
			pager : '#monthRategridPager',
			sortname : 'id',
			viewrecords : true,
			jsonReader : {
				repeatitems : false
			},
			sortorder : "desc",
			caption : "费用月结信息列表",
			editurl:"editMonthRate.action"
		});
		jQuery("#monthRatelist").jqGrid('navGrid', '#monthRategridPager', {
			edit : true,
			add : true,
			view:true,
			del : false
		}, {}, {}, {},{multipleSearch:true});
		//加 |	
		//jQuery("#monthRatelist").navSeparatorAdd("#monthRategridPager");
		//加入自定义button 导出excel
		/* jQuery("#monthRatelist").jqGrid('navButtonAdd', '#monthRategridPager',{
			caption:"XLS",
			buttonicon:"ui-icon-newwin",
			onClickButton:printExcel,
			position:"last",
			title:"Export this form to Excel",
			cursor:"pointer"
		}); */
	});
	datePick = function(elem)
	{
	   jQuery(elem).datepicker();
	}
	function printExcel(){
		var url="exportExcel.action";
		$.ajax({
			type : "POST",
			url : url,
			dataType : "json",
			success : function(data) {
				
			}
		});
	}
</script>
<body>
	<div align="center">
		<table id="monthRatelist"></table>
		<div id="monthRategridPager"></div>
	</div>
</body>
</html>